<template>
	<view class="user">
		<!-- 头部 -->
		<view class="user-wrap bg-yellow">
			<view @click="showSettings" class="setting iconfont icon31shezhi"></view>
			<view class="info">
				<image @click="handleLogin" class="avatar" mode="aspectFill" :src="userInfo.avatarUrl"></image>
				<view class="text-bold text-white nickname">{{ userInfo.nickName }}</view>
			</view>
		</view>

		<!-- 订单状态 -->
		<!-- <view class="order-status">
			<view class="status-wrap"> -->
		<!-- 单元格 -->
		<!-- <view class="cell">
					<view class="cell-left">
						<image class="cell-icon" src="/static/images/user/icon-order.png" mode="aspectFill"></image>
						<view class="cell-text">全部订单</view>
					</view>
					<view class="iconfont iconmore1"></view>
				</view> -->

		<!-- 订单状态 -->
		<!-- <view class="status-list">
					<view class="status-item" hover-class="btn-hover" v-for="(item, index) in orderStatusList" :key="index">
						<view class="item-icon" :class="item.icon"></view>
						<view class="item-text">{{ item.name }}</view>
					</view>
				</view>
			</view>
		</view> -->

		<!-- 滑动导航 -->
		<view style="border-radius: 20rpx; overflow: hidden; margin: 0 20rpx; margin-top: -10vw;" class="">
			<com-nav :list="list" :col="3"></com-nav>
		</view>

		<!-- 用户功能 -->
		<view class="com-item">
			<view class="com-wrap">
				<view class="cell" @click="handleUserList(index)" v-for="(item, index) in userList" :key="index">
					<view class="cell-left">
						<image class="cell-icon" :src="item.icon" mode="aspectFill"></image>
						<view class="cell-text">{{ item.title }}</view>

					</view>
					<view class="iconfont iconmore1"></view>
				</view>
			</view>
		</view>

		<!-- 用户服务 -->
		<view class="com-item">
			<view class="com-wrap">
				<view class="cell" @click="handleServerList(index)" v-for="(item, index) in serverList" :key="index">
					<view class="cell-left">
						<image class="cell-icon" :src="item.icon" mode="aspectFill"></image>
						<view class="cell-text">{{ item.title }}</view>
					</view>
					<view class="iconfont iconmore1"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import comNav from './components/com-nav.vue'
	import {wxLogout} from '../../request/handleReq.js'
	import {
		mapState,
		mapMutations
	} from 'vuex';

	export default {
		components: {
			comNav
		},

		computed: mapState(['hasLogin', 'userInfo']),

		methods: {
			...mapMutations(['login', 'logout']),
			handleUserList(index) {
				switch (index) {
					case 0:
						
						uni.navigateTo({
							url: '../myOrders/myOrders'
						});
						break;
					case 1:
						uni.navigateTo({
							url: '../myRent/myRent'
						});
						break;
					case 2:
						uni.showModal({
							title: '提示',
							content: '您还没有权限哦~',
							showCancel: false
						});
						break;
					case 3:
						uni.navigateTo({
							url: '../footprint/footprint'
						});
						break;
				}
			},

			handleServerList(index) {
				switch (index) {
					// case 0:
					// 	uni.navigateTo({
					// 		url: '../contact/contact'
					// 	});
					// 	break;
					case 0:
						uni.navigateTo({
							url: "../help/help"
						})
						break;
					case 1:
						uni.navigateTo({
							url: "../version/version"
						});
						break;
				}
			},

			handleLogin() {
				if (this.hasLogin) {
					uni.showModal({
						title: '提示',
						content: '是否退出登录',
						confirmColor: 'red',
						success: (res) => {
							if (res.confirm) {
								
								wxLogout();

							}
						}
					})
				} else {


					uni.navigateTo({
						url: '../login/login',


					})
				}

			},
			showSettings(){
				uni.showModal({
					title: '提示',
					content: '尚在开发，敬请期待',
					showCancel:false
					
				})
			}
		},



		mounted() {
			// let userInfo = uni.getStorageSync('userInfo')||{};

			// if(JSON.stringify(userInfo)!=='{}'){

			// 	this.userInfo['headPicUrl'] = userInfo.avatarUrl;
			// 	this.userInfo['nickName'] = userInfo.nickName;


			// }else{
			// 	this.userInfo['headPicUrl'] = '/static/images/user/defaultAvatar.png';
			// 	this.userInfo['nickName'] = '点击头像登录';
			// }
		},

		data() {
			return {

				// userInfo: {
				// 	// headPicUrl: '/static/images/user/defaultAvatar.png',
				// 	// nickName: '史蒂芬.林'
				// 	headPicUrl:'',
				// 	nickName:''

				// },
				// orderStatusList: [
				// 	{ name: '待付款', icon: 'iconfont icon31daifukuan', status: 10 },
				// 	{ name: '待发货', icon: 'iconfont icon31daifahuo', status: 30 },
				// 	{ name: '待收货', icon: 'iconfont icon31daishouhuo', status: 40 },
				// 	{ name: '待评价', icon: 'iconfont icon31daipingjia', status: 50 },
				// 	{ name: '已完成', icon: 'iconfont icon31yiguanzhudianpu', status: 55 }
				// ],
				currentIndex: 0,
				list: [{
						icon: '/static/images/user/class-01.png',
						text: '我的电子券'
					},
					{
						icon: '/static/images/user/class-04.png',
						text: '送礼提醒'
					},

					{
						icon: '/static/images/user/class-03.png',
						text: '我的积分'
					},

				],
				userList: [
					{
						title: '我的订单',
						icon: '/static/images/user/icon-order.png',
						path: 'collect-list'
					},
					{
						title: '我的租借',
						icon: '/static/images/user/status-04.png',
						path: 'collect-list'
					},
					{
						title: '我的收藏',
						icon: '/static/images/user/icon-collect.png',
						path: 'collect-list'
					},
					{
						title: '我的足迹',
						icon: '/static/images/user/icon-foot.png',
						path: 'browse-list'
					}
				],
				serverList: [
					// {
					// 	title: '客服中心',
					// 	icon: '/static/images/user/icon-kefu.png',
					// 	path: 'kefu'
					// },
					{
						title: '帮助中心',
						icon: '/static/images/user/icon-help.png',
						path: 'help'
					},
					{
						title: '版本',
						icon: '/static/images/user/icon-about.png',
						text: '1.0.0'
					}
				]
			};
		}
	};
</script>

<style lang="scss">
	page {
		background: #f2f2f2;
		// padding-bottom: 15rpx;
	}

	.btn-hover {
		background: #f2f2f2 !important;
	}

	.user {
		.user-wrap {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 50vw;
			padding: 30rpx;
			z-index: 9;
			border-radius: 0 0 20% 20%;

			// background: url('https://handsel.oss-cn-shenzhen.aliyuncs.com/1588938371592.jpg') no-repeat;
			// background-size: cover;
			.setting {
				color: #fff;
				position: absolute;
				top: 150rpx;
				left: 60rpx;
				font-size: 50rpx;
			}

			.info {
				position: absolute;
				text-align: center;

				.avatar {
					width: 150rpx;
					height: 150rpx;
					border-radius: 50%;
				}

				.nickname {
					// color: #fff;
					font-size: 28rpx;
				}
			}
		}

		.order-status {
			padding: 0 20rpx;
			margin-top: -10vw;

			.status-wrap {
				border-radius: 25rpx;
				overflow: hidden;

				.status-list {
					display: flex;
					justify-content: space-evenly;
					align-items: center;
					background: #fff;
					padding-top: 30rpx;
					padding-bottom: 30rpx;

					.status-item {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;

						.item-icon {
							line-height: 1;
							font-size: 65rpx;
							color: #bbb;
						}

						.item-text {
							font-size: 28rpx;
							color: #666;
							margin-top: 5rpx;
						}
					}
				}
			}
		}

		.com-item {
			padding-left: 20rpx;
			padding-right: 20rpx;
			margin-top: 20rpx;

			.com-wrap {
				border-radius: 25rpx;
				overflow: hidden;
			}
		}

		.cell {
			height: 80rpx;
			padding-left: 20rpx;
			padding-right: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #fff;
			border-bottom: 1px solid #f8f8f8;

			&:active {
				background: #f2f2f2;
			}

			&:last-child {
				border-bottom: none !important;
			}

			.cell-left {
				display: flex;
				align-items: center;

				.cell-icon {
					width: 50rpx;
					height: 50rpx;
				}

				.cell-text {
					color: #666;
					font-size: 28rpx;
					margin-left: 20rpx;
				}
			}

			.iconfont {
				font-size: 40rpx;
				color: #999;
			}
		}
	}
</style>
